<template>
    <div class='log-page'>
        <el-row>
            <el-input v-model="userSearch" placeholder="用户名/用户操作" size="small" class="username"></el-input>
            <el-button size="small" @click="onSearch">查询</el-button>
        </el-row>
        <el-table :data="tableData" row-key="id" class="table" :max-height="clienHeight - 300">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand" v-if="props.row.exDesc">
                        <el-form-item label="异常描述">
                            <span> {{ props.row.exDesc }}</span>
                        </el-form-item>
                        <el-form-item label="异常详情">
                            <span>{{ props.row.exDetail }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="ID" width="140" align="center">
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="120" align="center">
            </el-table-column>
            <el-table-column prop="operation" label="用户操作" width="160" align="center">
            </el-table-column>
            <el-table-column prop="method" label="请求方法" show-overflow-tooltip width="300" align="center">
            </el-table-column>
            <el-table-column prop="params" label="请求参数" show-overflow-tooltip width="300" align="center">
            </el-table-column>
            <el-table-column prop="consumingTime" label="执行时长(毫秒)" width="140" align="center">
            </el-table-column>
            <el-table-column prop="ip" label="IP地址" align="center" width="140">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" width="180">
            </el-table-column>
            <el-table-column prop="type" label="状态" align="center">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.type === 1 ? 'success' : 'danger'">{{ scope.row.type === 1 ? '成功' :
                        '失败' }}</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="text-align:right;">
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-row>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { logAPI } from '@/http'
export default {
    name: 'log-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            userSearch: '',
            tableData: [],
            currentPage: 1,
            limit: 10,
            total: 0,
        }
    },
    created() {
        this.getTableList()
    },
    computed: {
        ...mapState(['clienHeight'])
    },
    methods: {
        handerClose(val) {
            this.show = false
            if (val) {
                this.getTableList()
            }
        },
        onSearch() {
            this.currentPage = 1
            this.getTableList()
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.limit = val
            this.getTableList()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage = val
            this.getTableList()
        },
        getTableList() {
            logAPI.getList({
                page: this.currentPage,
                limit: this.limit,
                // username: this.userSearch,
                key: this.userSearch
            }).then(res => {
                console.log('数据：', res.data);
                if (res.code === 200) {
                    this.tableData = res.data.list
                    // console.log('数据：', this.tableData);
                    this.total = res.data.totalCount
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
.log-page {
    .username {
        width: 200px;
        margin-right: 10px;
    }

    /deep/ .table {
        margin: 20px 0;
        width: 100%;

        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 100%;
        }
    }

    /deep/ .el-table__cell {
        padding: 6px 0;
    }
}
</style>